<template>
  <button type="button" class="button">
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        fill="currentColor"
        class="bi bi-arrow-repeat"
        viewBox="0 0 16 16"
    >
      <path
          d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"
      ></path>
      <path
          fill-rule="evenodd"
          d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"
      ></path>
    </svg>
  </button>
</template>
<script setup lang="ts">
import {computed, defineProps, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts"
defineOptions({
  name: 'Replay'
})
const props = defineProps(['option']);
const state = reactive({
  option:{
    left:80,
    top:0,
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
let button
let svg

onMounted(()=>{
  initElement()
  setting()
})
function initElement(){
  button=document.querySelector('.button')
  svg = button.querySelector('svg');

// 4. 动画结束后自动移除类名（为下次点击重置）
  svg.addEventListener('animationend', () => {
    button.blur()
  }, { once: false }); // 保持监听，每次动画结束都触发
}
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
})


</script>
<style scoped>
.button {
  color: white;
  background-color: rgba(34, 34, 34, 0.27);
  font-weight: 500;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
  padding-left: 0.9rem;
  padding-right: 0.2rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  cursor: pointer;
  text-align: center;
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  border: none;
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
  z-index: 9999;
  outline: #000000;
}

.button:hover {
  //background-color: #333;
}

.button svg {
  display: inline;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.75rem;
  color: white;
  animation: none;
}
.button:focus svg {
  animation: spin_357 0.5s linear;
}

@keyframes spin_357 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    animation: none;
  }
}

</style>
